<div class="container">
  <div>
    <div class="login">
      <a [routerLink]="['../login']">立即登录</a>
    </div>

    <div>
      <mat-card>
        <mat-card-title>用户注册</mat-card-title>
        <mat-card-content>
          <form [formGroup]="form" (ngSubmit)="register()">
            <mat-form-field>
              <input type="email" matInput placeholder="邮箱"
                formControlName="email" />
              <mat-error *ngIf="email.touched && email.hasError('required')">邮箱不能为空</mat-error>
              <mat-error *ngIf="email.touched && email.hasError('email')">请检查邮箱格式</mat-error>
            </mat-form-field>

            <mat-form-field>
              <input type="text" matInput placeholder="用户名"
                formControlName="username" />
              <mat-error *ngIf="username.touched &&
                username.hasError('required')">用户名不能为空</mat-error>
            </mat-form-field>

            <mat-form-field>
              <input type="password" matInput placeholder="密码"
                formControlName="password" />
              <mat-error *ngIf="password.touched &&
                password.hasError('required')">密码不能为空</mat-error>
            </mat-form-field>

            <mat-form-field>
              <input type="password" matInput placeholder="确认密码"
                formControlName="passwordConfirm" />
              <mat-error *ngIf="password.touched &&
                password.hasError('required')">请确认密码</mat-error>
            </mat-form-field>

            <mat-hint *ngIf="!form.valid"><small>请填写表单</small></mat-hint>
            <mat-error *ngIf=" passwordConfirm.touched &&
              form.hasError('passwordsNotMatching') "><small>请确认两次填写的密码是否一致</small></mat-error>
            <div class="button">
              <button mat-button type="submit" [disabled]="!form.valid">
                注册
              </button>
            </div>

          </form>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>
